<template>
  <!-- <div class="evaluate-con">
    <div class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
      <div class="pictrue">
        <img :src="orderCon.productInfo.image" class="image" />
      </div>
      <div class="text acea-row row-between">
        <div class="name line2">
          {{ orderCon.productInfo.store_name }}
        </div>
        <div class="money">
          <div>￥{{ orderCon.productInfo.price }}</div>
          <div class="num">x{{ orderCon.cart_num }}</div>
        </div>
      </div>
    </div>
    <div class="score">
      <div
        class="item acea-row row-middle"
        v-for="(item, indexw) in scoreList"
        :key="indexw"
      >
        <div>{{ item.name }}</div>
        <div class="starsList">
          <span
            @click="stars(indexn, indexw)"
            v-for="(itemn, indexn) in item.stars"
            :key="indexn"
            class="iconfont"
            :class="
              item.index >= indexn
                ? 'icon-shitixing font-color-red'
                : 'icon-kongxinxing'
            "
          ></span>
        </div>
        <span class="evaluate">{{
          item.index === -1 ? "" : item.index + 1 + "分"
        }}</span>
      </div>
      <div class="textarea">
        <textarea
          placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
          v-model="expect"
        ></textarea>
        <div class="list acea-row row-middle">
          <div
            class="pictrue"
            v-for="(item, index) in uploadPictures"
            :key="index"
          >
            <img :src="item" />
            <span
              class="iconfont icon-guanbi1 font-color-red"
              @click="uploadPictures.splice(index, 1)"
            ></span>
          </div>
          <VueCoreImageUpload
            class="btn btn-primary"
            :crop="false"
            compress="80"
            @imageuploaded="imageuploaded"
            :headers="headers"
            :max-file-size="5242880"
            :credentials="false"
            inputAccept="image/*"
            inputOfFile="file"
            :url="url"
            v-if="uploadPictures.length < 8"
          >
            <div
              class="pictrue uploadBnt acea-row row-center-wrapper row-column"
            >
              <span class="iconfont icon-icon25201"></span>
              <div>上传图片</div>
            </div>
          </VueCoreImageUpload>
        </div>
      </div>
      <div class="evaluateBnt bg-color-red" @click="submit">立即评价</div>
    </div>
  </div> -->

  <el-container>
    <el-header height="172px" style="padding:0 0;">
        <HomeNavigation></HomeNavigation>
        <SearchBox></SearchBox>
        <ClassNavigation></ClassNavigation>
    </el-header>
    <el-container class="evaluate">
      <el-container style="width:1090px;margin:20px auto 0;">
          <el-aside width="180px">
              <div class="side">
                <el-menu
                default-active="1-1"
                active-text-color="#b4a078"
                @open="handleOpen"
                @close="handleClose">
                  <el-menu-item-group>
                    <p slot="title" class="sideTitle">我的服务</p>
                    <el-menu-item index="1-1">
                       <router-link to="/user">
                        <p class="sideIetm">个人中心</p>
                      </router-link>
                      </el-menu-item>
                    <el-menu-item index="1-2">
                      <router-link to="/user/vip">
                        <p class="sideIetm">会员中心</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-3">
                      <router-link to="/user/add_manage">
                        <p class="sideIetm">地址信息</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-4">
                      <router-link to="/collection">
                      <p class="sideIetm">我的收藏</p>
                      </router-link>
                      </el-menu-item>
                    <el-menu-item index="1-5">
                        <router-link to="/user/user_coupon">
                          <p class="sideIetm">优惠券</p>
                        </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <p slot="title" class="sideTitle">订单管理</p>
                    <el-menu-item index="2-1">
                      <router-link to="/order/list/0">
                        <p class="sideIetm">我的订单</p>
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2"><router-link to="/order/refund_list"> 
                      <p class="sideIetm">售后/退款</p>
                    </router-link></el-menu-item>
                  </el-menu-item-group>
              </el-menu>
            </div>
          </el-aside>
        <el-main style="padding: 20px 0 20px 20px;">
          <div class="main">
            <p class="title">商品评价</p>
            <div class="table" v-if="orderCon.productInfo">
              <div class="border">
              <div class="t-title acea-row">
                <div class="line1">商品信息</div>
                <div class="line2">数量</div>
                <div class="line2">单价</div>
                <div class="line3">小计</div>
              </div>
              <div class="tr acea-row"  >
                <div class="item-1 acea-row">
                  <div class="goods acea-row">
                    <div class="link">
                        <img
                        :src="orderCon.productInfo.image"
                      />
                    </div>
                    <div class="f-fz"> {{ orderCon.productInfo.store_name }}</div>
                  </div>
                  <div class="cell">x {{ orderCon.cart_num }}</div>
                  <div class="cell">￥{{ orderCon.productInfo.price }}</div>
                </div>
                <div class="item-2">￥{{ orderCon.cart_num * orderCon.productInfo.price}}</div>
              </div>
            </div>
            </div>
            <div class="form" >
               <div class="f-item acea-row" v-for="(item, indexw) in scoreList" :key="indexw">
                 <div class="i-line">{{ item.name }}:</div>
                 <el-rate
                  v-model="scoreList[indexw].index"
                  show-text
                 >
                </el-rate>
               </div>
            </div>
            <div class="r-item acea-row">
              <p class="i-name">备注说明：</p>
                <el-input
                type="textarea"
                placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
                v-model="expect" 
                maxlength="100"
                class="i-textarea"
                show-word-limit
              >
              </el-input>
            </div>
            <div class="r-item-1">
              <p class="i-name-1 ">上传图片（只能上传jpg文件，不得超过5张图片，每张不超过5M）：</p>
                <el-upload
                  :action="url"
                  list-type="picture-card"
                  :on-success="imageuploaded"
                  limit="5"
                  :before-upload="beforeAvatarUpload"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
          </div>
          <div class="f-btn golden">
            <el-button  @click="submit" ><p>立即评价</p>
            </el-button>
          </div> 
          </div>  
        </el-main>
      </el-container>
      <el-footer style="padding: 0;">
      <Foot></Foot>
        </el-footer>
    </el-container>
</el-container>
</template>
<style scoped>
  .evaluate {
    background-color: #ffffff;
  }
  .side {
    border: 1px solid #eaeaea;
    height: 510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }
  
   .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .main {
    width: 890px;
  }
  .main .title {
    font-size: 14px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    margin-bottom: 15px;
  }

  .form{
    width: 890px;
    padding: 20px;
    margin-top: 20px;
  }
  .form  .f-item {
    height: 40px;
    margin: 15px 0;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 12px;
  }
  .form  .f-item  .i-line {
    width: 100px;
  }
  .table {
    margin-top: 20px;
    width: 890px;
    margin-bottom: 30px;
  }
   .table .icon {
    width: 85px;
    height: 86px;
    margin-top: 7px;
    margin: 0 auto;
  }
   .table .icon  .i-size {
    font-size: 85px;
  }
     .all {
    height: 43px;
    max-width: 400px;
    line-height: 41px;
    font-size: 14px;
    color: #333;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: right;
    padding-right: 10px;
  }
   .table .border {
    border: 1px solid #eaeaea;
  }
   .table .tt , .t-title{
    height: 43px;
    padding-left: 21px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    line-height: 42px;
  }
   .table .tt {
    max-width: 350px;
  }
   .table .t-title {
    padding: 0;
    width: 888px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
  }
   .table .t-title .line1 {
    width: 358px;
  }
   .table .t-title .line2 {
    width: 129px;
  }
   .table .t-title .line3 {
    width: 140px;
  }
   .table  .tr {
    width: 888px;
    height: 141px;
    padding: 20px 0;
  }

   .table  .tr .item-1 {
    width: 618px;
  }
   .table  .tr .item-1  .goods {
    width: 338px;
    margin-left: 20px;
  }
   .table  .tr .item-1  .goods .link {
    width: 100px;
    height: 100px;
    margin-right: 10px;

  }
   .table  .tr .item-1  .goods .link img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
   .table  .tr .item-1 .goods .f-fz {
    width: 215px;
    max-height: 38px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    margin:  auto 0;
    font-size: 14px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
   .table  .tr .item-1 .cell {
    width: 129px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    margin: auto 0;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
   .table  .tr .item-2 {
    width: 140px;
    margin: auto 0;
    text-align: center;
    line-height: 19px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
  }
   .table  .tr .item-3 {
    width: 130px;
    margin: auto 0;
    text-align: center;
    cursor: pointer;
    color: #69c;
  }
   .r-item-1 {
    width: 890px;
    padding:10px 20px;
    border: 1px solid #eaeaea;
    border-radius: 15px;
    margin-bottom: 20px;
  }
    .r-item-1 .i-name-1 {
    width: 450px;
    color: #333333;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .f-btn {
    margin-left: 394px;
  }
  .f-btn  >>>.el-button--small {
    padding: 13px 30px;
    color: #999;
    border: 1px solid #c0ae8a;
    background-color: #f5f3ef;
  }
  .f-btn  >>>.el-button--small:hover {
    background-color: #fff;
  }
  .golden p{
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #b4a078;
  }

   .r-item {
    width: 888px;
    height: 50px;
    margin-bottom: 20px;
  }
  .r-item  .i-name {
    width: 100px;
    color: #333333;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    text-align: center;
    margin-right: 10px;
  }
   .r-item .i-textarea {
    width: 500px;
  }
   .r-item .r-primary {
    width: 500px;
    height:300px ;
    border: 1px solid #eaeaea;
  }
</style>
<script>
import { postOrderProduct, postOrderComment } from "@api/store";
import { trim, VUE_APP_API_URL } from "@utils";
import { required } from "@utils/validate";
import VueCoreImageUpload from "vue-core-image-upload";
import { validatorDefaultCatch } from "@utils/dialog";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";


const NAME = "GoodsEvaluate";

export default {
  name: NAME,
  components: {
    VueCoreImageUpload,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  props: {},
  data: function() {
    return {
      orderCon: {
        cartProduct: {
          productInfo: {}
        }
      },
      scoreList: [
        {
          name: "商品质量",
          stars: ["", "", "", "", ""],
          index: -1
        },
        {
          name: "服务态度",
          stars: ["", "", "", "", ""],
          index: -1
        }
      ],
      url: `${VUE_APP_API_URL}/upload/image`,
      headers: {
        "Authori-zation": "Bearer " + this.$store.state.app.token
      },
      uploadPictures: [],
      expect: "",
      unique: this.$route.params.id
    };
  },
  mounted: function() {
    this.getOrderProduct();
  },
  watch: {
    $route(n) {
      if (n.name === NAME && this.unique !== n.params.id) {
        this.unique = n.params.id;
        this.$set(this.scoreList[0], "index", -1);
        this.$set(this.scoreList[1], "index", -1);
        this.expect = "";
        this.uploadPictures = [];
        this.getOrderProduct();
      }
    }
  },
  methods: {
    getOrderProduct: function() {
      let that = this,
        unique = that.unique;
      postOrderProduct(unique).then(res => {
        that.orderCon = res.data;
      });
    },
    stars: function(indexn, indexw) {
      this.scoreList[indexw].index = indexn;
      
    },
    imageuploaded(res) {
      if (res.status !== 200)
        return this.$dialog.error(res.msg || "上传图片失败");
      this.uploadPictures.push(res.data.url);
    },
    beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 5;

        if (!isJPG) {
          this.$dialog.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$dialog.error('上传图片大小不能超过 5MB!');
        }
        return isJPG && isLt2M;
      },
    async submit() {
      const expect = trim(this.expect),
        product_score =
          this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
        service_score =
          this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
      try {
        await this.$validator({
          product_score: [
            required("请选择商品质量分数", {
              type: "number"
            })
          ],
          service_score: [
            required("请选择服务态度分数", {
              type: "number"
            })
          ]
        }).validate({ product_score, service_score });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      postOrderComment({
        product_score: product_score,
        service_score: service_score,
        unique: this.unique,
        pics: this.uploadPictures.join(","),
        comment: expect
      })
        .then(() => {
          this.$dialog.success("评价成功");
          this.$router.replace({
            path: "/order/detail/" + this.orderCon.order_id
          });
        })
        .catch(res => {
          this.$dialog.error(res.msg);
        });
    }
  }
};
</script>
